import React, { Component } from 'react';
import "../../styles/MyKind/MyMind.css";
import { withRouter } from 'react-router-dom'
import { category_list, category_subcate } from "../../api/index";
class MyMine extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            subcate: {},
            currentIndex: 0
        }
    }
    handleclick(id, index) {
        this.currentIndex = index
        category_subcate({ id }).then((res) => {
            // console.log(res.data.subcate);
            //这是个啥setState
            this.setState({
                subcate: res.data.subcate
            })
        })
    }
    toMylist(id) {
        // console.log(id);
         // this.props.history.push('/search/'+666);//跳动态路由
        this.props.history.push(`/index/ProductPage/${id}`);//跳动态路由
        
    }
    componentDidMount() {
        category_list().then((res) => {
            // console.log(res.data);
            //数据
            this.setState({ list: res.data.list })
            //包进去请求
            category_subcate({ id: res.data.list[0].id }).then((res) => {
                console.log(res.data.subcate);
                //这是个啥setState
                this.setState({
                    subcate: res.data.subcate
                })
            })
        })

    }

    render() {
        return (
            <div className='mymine'>
                {/*  一级*/}
                <div className='leftbox'>
                    {
                        this.state.list.map((item, index) => {
                            return (<p className={`tab ${this.state.
                                currentIndex === index ? 'active' : ''}`}
                                key={index} onClick={() => { this.handleclick(item.id, index) }}>
                                <span>{item.name}</span>
                            </p>)
                        })

                    }
                </div>
                {/* 二三级目录 */}
                <div className='rightbox'>
                    {
                        this.state.subcate.subcategory && this.state.subcate.subcategory.map((item2, index) => {
                            return (<div className='box' key={index}>
                                <p className='title' >{item2.name}</p>
                                {/* 三级分类 */}
                                <div className='list'>
                                    {
                                        item2.subNavs.map((item3, index) => {
                                            return (<div className='cate' key={index} 
                                            onClick={() => { this.toMylist(item3.id) }} >
                                                <img src={item3.pic} alt="" />
                                                <div className="name">{item3.name}</div>
                                            </div>)
                                        })
                                    }
                                </div>
                            </div>)
                        })
                    }
                </div>

            </div>
        );
    }
}

export default withRouter(MyMine);